<template>
  <div>
    <div id="header">

    </div>
    <div id="main">
      <div class="w" style="background-color: #fff;width: 600px;height: 650px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="收货地址">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="优惠券">
            <el-select v-model="form.region" placeholder="请选择优惠券">
              <el-option label="会员红包" value="hongbao1"></el-option>
              <el-option label="会员商家红包" value="hongbao2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="基本信息">
            <el-col :span="10">
              <el-input placeholder="请输入姓名" v-model="input1">
                <template slot="prepend">收货人姓名</template>
              </el-input>
            </el-col>
            <el-col class="line" :span="2"> </el-col>

            <el-col :span="12">
              <el-input placeholder="请输入手机号" v-model="input2">
                <template slot="prepend">手机号</template>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="到店自取">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="餐具数量">
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label=""></el-input-number>
          </el-form-item>

          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.desc" placeholder="口味，偏好等"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交订单</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        num:1
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleChange(value) {
        console.log(value);
      }
    }
  }
</script>

<style scoped>
  body{
    background-color: #f5f6f7;
    color: #666;
    min-width: 1200px;
  }
  .w{
    width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
#header{
  height: 60px;
}
  #main{


  }
</style>
